<template>
<div>MyTable组件</div>
<table class="table table-bordered table-striped">
    <!-- 表格的标题区域 -->
    <thead>
        <tr>
            <!-- 命名插槽 -->
            <slot name="header"></slot>
        </tr>
    </thead>
    <!-- 表格的主体区域 -->
    <tbody>
        <!-- 使用v-for指令，循环渲染表格的数据行 -->
        <tr v-for="(item,index) in data" :key="item.id">
        <!-- 位数据行的td预留的 "作用域插槽"，:row和:index用于和父组件里面的{row,index}做对应匹配 -->
        <slot name="body" :row="item" :index="index"></slot>
        </tr>
    </tbody>
</table>
</template>

<script>
export default{
    name:'MyTable',
    props:{
        // 表格的数据源，这里的data数据来源于父组件调用的时候传递过来的数据
        data:{
            type:Array,
            required:true,
            default:[],
        },
    },
}
</script>

<style lang="less" scoped></style>